<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="yes" name="apple-touch-fullscreen" />
		<meta content="telephone=no,email=no" name=format-detection />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>推荐用户</title>
	</head>
	<link href="../c/recommend.css" rel="stylesheet" />
	<style>
		.jzpng {
			width: 100%;
			text-align: center;
			display: none;
		}

		.jzpng img {
			transition: all 3s ease;
			width: 1.5rem;
			webkit-transform: rotate(360deg);
			-webkit-animation: rotation .65s 0s linear infinite;
			animation: rotation .65s 0s linear infinite;
		}

		@-webkit-keyframes rotation {
			from {
				-webkit-transform: rotate(0deg);
			}

			to {
				-webkit-transform: rotate(360deg);
			}
		}

		@keyframes spin {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
		.user_dj span {
			margin-left: 3%;
			font-size: 0.4rem;
			background: #FE2C55;
			border-radius: 50%;
			color: #fff;
			display: block;
			width: 1rem;
			height: 1rem;
			float: right;
			position: relative;
			right: 14%;
			text-align: center;
			line-height: 1rem;
		}
	</style>
	<body>
		<div class="user">
			<p class="user_pic"><img src=""></p>
			<p class="username">
				<span>
					<!-- 梧的小姐姐 -->
				</span>
				<span>
					<!-- 一星达人 --></span>
			</p>
			<p class="user_time">
				<!-- 加入时间: 2020.11.16 -->
			</p>
			<p class="yub">愉币: </p>
		</div>
		<div class="list">
			<div class="list_p">
				<p class="lsit_p_p lsit_p_active" name="-1"><span>全部</span><small style="display: block;"></small></p>
				<p class="lsit_p_p" name="3"><span>普通</span><small></small></p>
				<p class="lsit_p_p" name="0"><span>达人</span><small></small></p>
				<p class="lsit_p_p" name="1"><span>工会</span><small></small></p>
				<p class="lsit_p_p" name="2"><span>机构</span><small></small></p>
			</div>
		</div>
		<div class="userlist" id="userlist">
			<!-- <div class="user_lisy">
				<p class="user_img"></p>
				<p class="user_name">测试人员</p>
				<p class="user_dj">用户等级:普通会员<span style="">新</span></p>
				<p class="user_times">2020-12-25 16:42:18</p>
				<p class="rew">已完成今日任务</p>
			</div>
			<div class="user_lisy">
				<p class="user_img"></p>
				<p class="user_name">测试人员</p>
				<p class="user_dj">用户等级:普通会员</p>
				<p class="user_times">2020-12-25 16:42:18</p>
				<p class="rew closrew">未完成今日任务</p>
			</div>
			<div class="user_lisy">
				<p class="user_img"></p>
				<p class="user_name">测试人员</p>
				<p class="user_dj">用户等级:普通会员</p>
				<p class="user_times">2020-12-25 16:42:18</p>
			</div> -->
		</div>
		<div class="jzpng"><img src="../i/footer_progress.png"></div>

		<p style="width:100%;color: #ccc;margin-top: 1.5rem;margin-bottom: 1rem;text-align: center;display: none;" class="ts">已经见底了！</p>
	</body>
</html>
<script src="../j/api.js"></script>
<script src="../j/jquery-3.3.1.min.js"></script>
<script>
	var len = $(".lsit_p_p").length;
	var wid = $(".lsit_p_p").width();
	$(".list_p").width(((len + 2) * wid) / 16 + 0.5 + "rem");
	var t;
	apiready = function() {
		var url = "agent/groupList?page=1&page_size=5";
		_ajax1(url, function(ret, err) {
			console.log(JSON.stringify(ret));
			console.log(JSON.stringify(err));
			if (ret) {
				$(".user_pic img").attr("src", _img(ret.ret.img));
				$(".username span").eq(0).text(ret.ret.nickname);
				if (ret.ret.levels == "0" && ret.ret.agent == 0) {
					$(".username span").eq(1).text("普通");
				} else if (ret.ret.levels == 0 && ret.ret.agent == 1) {
					$(".username span").eq(1).text("达人");
				} else if (ret.ret.levels == 1 && ret.ret.agent == 1) {
					$(".username span").eq(1).text("工会");
				} else if (ret.ret.levels == 2 && ret.ret.agent == 1) {
					$(".username span").eq(1).text("机构");
				}
				$(".user_time").text("" + ret.ret.agent_date + "");
				$(".yub").text("愉币: " + ret.ret.balance + "");
				if (ret.ret.list) {
					var str = '';
					for (var i = 0; i < ret.ret.list.length; i++) {
						str += '<div class="user_lisy" name="' + ret.ret.list[i].levels + '">';
						if (ret.ret.list[i].img == null || ret.ret.list[i].img == "null") {
							str += '<p class="user_img"><img src="' + picurl + 'redian-img-zan.png" style="width:100%;height:100%;border-radius: 50%;"/></p>';
						} else {
							str += '<p class="user_img"><img src="' + _img(ret.ret.list[i].img) + '"style="width:100%;height:100%;border-radius: 50%;"/></p>';
						}
						str += '<p class="user_name">' + ret.ret.list[i].nickname + '</p>';
						str += '<p class="user_dj">用户等级:';
						if (ret.ret.list[i].levels == 0 && ret.ret.list[i].agent == 0) {
							str += "普通";
						} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 0) {
							str += "达人";
						} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 1) {
							str += "工会";
						} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 2) {
							str += "机构";
						}
						str += '</p>';
						str += '<p class="user_times">';
						var date = new Date(Number(ret.ret.list[i].create_time + "000")); //将接收到的的String类型的时间转为数字类型
						var y = date.getFullYear();
						var m = date.getMonth() + 1;
						var d = date.getDate();
						var hour = date.getHours().toString();
						var minutes = date.getMinutes().toString();
						var seconds = date.getSeconds().toString();
						var time = y + "-" + m + "-" + d + "&nbsp;&nbsp" + hour + ":" + minutes + ":" + seconds;
						str += '' + time + '</p>';
						// console.log(JSON.stringify(ret.ret.list[i]))
						if (ret.ret.list[i].agent != 0) {
							if (ret.ret.list[i].is_task == 0) {
								str += '<p class="rew closrew">未完成今日任务</p>';
							} else {
								str += '<p class="rew">已完成今日任务</p>';
							}
						}
						str += '</div>';
					}
					$(".userlist").html(str);
					$(".lsit_p_p").eq(0).children("span").text("全部" + ret.ret.all + "");
					$(".lsit_p_p").eq(1).children("span").text("普通" + ret.ret.n + "");
					$(".lsit_p_p").eq(2).children("span").text("达人" + ret.ret.s1 + "");
					$(".lsit_p_p").eq(3).children("span").text("工会" + ret.ret.s2 + "");
					$(".lsit_p_p").eq(4).children("span").text("机构" + ret.ret.s3 + "");
					$(".lsit_p_p").eq(0).children("span").attr("num", ret.ret.all);
					$(".lsit_p_p").eq(1).children("span").attr("num", ret.ret.n);
					$(".lsit_p_p").eq(2).children("span").attr("num", ret.ret.s1);
					$(".lsit_p_p").eq(3).children("span").attr("num", ret.ret.s2);
					$(".lsit_p_p").eq(4).children("span").attr("num", ret.ret.s3);
				} else {
					$(".userlist").html("<p style='width:100%;text-align: center;color:#fff;margin-top:1rem'>暂无数据！</p>");
				}
			} else {
				$(".userlist").html("<p style='width:100%;text-align: center;color:#fff;margin-top:1rem'>暂无数据！</p>");
			}
		})
		//获取团队列表type类型 page页数  page_size每次条数
		function listuser(type, page, ls) {
			var url = "agent/groupList?page=" + page + "&page_size=5&type=" + type + "";
			// $(".userlist").html("<p style='width:100%;text-align: center;color:#ccc;margin-top:1rem'>数据请求中！</p>")
			_ajax1(url, function(ret, err) {
				$(".jzpng").css("display", "none");
				// console.log(JSON.stringify(ret))
				if (ret) {
					if (ret.ret.list) {
						var str = '';
						for (var i = 0; i < ret.ret.list.length; i++) {
							str += '<div class="user_lisy" name="' + ret.ret.list[i].levels + '">';
							if (ret.ret.list[i].img == null || ret.ret.list[i].img == "null") {
								str += '<p class="user_img"><img src="' + picurl + 'redian-img-zan.png"style="width:100%;height:100%;border-radius: 50%;"/></p>';
							} else {
								str += '<p class="user_img"><img src="' + _img(ret.ret.list[i].img) + '"style="width:100%;height:100%;border-radius: 50%;"/></p>';
							}
							str += '<p class="user_name">' + ret.ret.list[i].nickname + '</p>';
							str += '<p class="user_dj">用户等级:';
							if (ret.ret.list[i].levels == 0 && ret.ret.list[i].agent == 0) {
								str += "普通";
							} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 0) {
								str += "达人";
							} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 1) {
								str += "工会";
							} else if (ret.ret.list[i].agent == 1 && ret.ret.list[i].levels == 2) {
								str += "机构";
							}
							str += '</p>';
							str += '<p class="user_dj">号码:' + ret.ret.list[i].mobile + '</p>';
							str += '<p class="user_times">';
							var date = new Date(Number(ret.ret.list[i].create_time + "000")); //将接收到的的String类型的时间转为数字类型
							var y = date.getFullYear();
							var m = date.getMonth() + 1;
							var d = date.getDate();
							var hour = date.getHours().toString();
							var minutes = date.getMinutes().toString();
							var seconds = date.getSeconds().toString();
							var time = y + "-" + m + "-" + d + "&nbsp;&nbsp" + hour + ":" + minutes + ":" + seconds;
							str += '' + time + '</p>';
							if (ret.ret.list[i].agent != 0) {
								if (ret.ret.list[i].is_task == 0) {
									str += '<p class="rew closrew">未完成今日任务</p>';
								} else {
									str += '<p class="rew">已完成今日任务</p>';
								}
							}
							str += '</div>';
						}
						if (ls == 0) {
							document.getElementById("userlist").innerHTML += str;
						} else {
							$(".userlist").html(str);
						}
					}
				} else {
					$(".userlist").html("<p style='width:100%;text-align: center;color:#fff;margin-top:1rem'>暂无数据！</p>")
				}
			})
		}
		var pagenum = 1;

		$(".list_p").on("click", "p", function() {
			var type = $(this).attr("name");
			var num = $(this).children("span").attr("num");
			// alert(type+"/"+num);
			$("#userlist").html("");
			$(".jzpng").css("display", "block");
			$(".list_p p small").css("display", "none");
			$(".list_p p").removeClass("lsit_p_active");
			$(this).addClass("lsit_p_active");
			$(this).children("small").css("display", "block");
			if (num > 0) {
				pagenum = 1;
				listuser(type, 1, 1);
			} else {
				pagenum = 1;
				$(".jzpng").css("display", "none");
				$(".userlist").html("<p style='width:100%;text-align: center;color:#fff;margin-top:1rem'>暂无数据！</p>")
			}
		})
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 150 //设置距离底部多少距离时触发，默认值为0，数字类型
			}
		}, function(ret, err) {
			$(".jzpng").css("display", "block");
			if (heigutgao == 1) { // heigutgao=1开启执行 0停止执行   防止连续滚动，等加载数据之后在进行滚动。
				pagenum += 1
			} else {
				pagenum += 1;
				// alert(pagenum)
				var ind = $(".lsit_p_active").index();
				var num = $(".lsit_p_active").children("span").attr("num");
				var type = $(".lsit_p_active").attr("name");
				if (num > 0) {
					var pagesize = (pagenum + 1) * 5;
					if ((num - pagesize) >= 1) {
						listuser(type, pagenum, 0);
						$(".ts").css("display", "block");
						$(".jzpng").css("display", "none");
					} else {
						page = pagenum + 1;
						$(".jzpng").css("display", "none");
						listuser(type, pagenum, 0);
					}
				} else {
					var s = 0;
					setInterval(function() {
						s++;
						if (s >= 3) {
							$(".jzpng").css("display", "none");
							clearInterval(t);
						}
					}, 1000)
				}
			}
		});
	}
</script>
